<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Event Slide</title>

<script src="../lib/jquery-2.1.1.js"></script>
<script>
$(document).ready(function(){
	// 버튼 꾸미기
	$('.btn').css({
		'width' : '100px',
		'height' : '25px',
		'border' : '2px dotted pink',
		'border-radius' : '5px'
	});
	
	// 버튼들 hover 효과
	$('.btn').hover(function(){
		$(this).css({
			'box-shadow' : '3px 3px 10px #BDBDBD',
			'cursor' : 'pointer'
		});
	}, function(){
		$(this).css({
			'box-shadow' : '',
			'cursor' : ''
		});
	});
	
	// 리스트가 담긴 박스 만들기
	$('#div1').css({
		'width' : '290px',
		'border' : '1px solid black',
		'border-bottom-radius' : '10px',
		'padding' : '10px',
		'background-color' : '#eeeeee'
	});
	
	// 기본적으로 div1 값을 숨긴다.
	$('#div1').hide();
	
	// Slide Down 버튼 클릭
	$('#btnSlideDown').click(function(){
		$('#div1').slideDown('slow');
	});
	
	// Slide Up 버튼 클릭
	$('#btnSlideUp').click(function(){
		$('#div1').slideUp('slow');
	});
	
	// Slide Toggel 버튼 클릭
	$('#btnSlideToggle').click(function(){
		$('#div1').slideToggle(100);
	});
	
});
</script>

</head>
<body>

<h3>Slide Event Example<hr/></h3>

<input type="button" value="Slide Down" id="btnSlideDown" class="btn">
<input type="button" value="Slide Up" id="btnSlideUp" class="btn">
<input type="button" value="Slide Toggle" id="btnSlideToggle" class="btn">

<br/>
<br/>
<br/>

<div id="div1">
	<li>사과</li>
	<li>배</li>
	<li>감</li>
	<li>포도</li>
	<li>참외</li>
	<li>복숭아</li>
	<li>수박</li>
	<li>딸기</li>
	<li>키위</li>
</div>

</body>
</html>